<template>
  <!-- 机构管理 -->
  <div class="institution-container">
    <div class="institution-row">
      <el-row :span="24" height="100%">
        <el-row :gutter="20">

          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-tree
                :expand-on-click-node="false"
                :data="depts"
                :props="defaultProps"
                @node-click="handleNodeClick"
              >
                <template slot-scope="{ data }">
                  <el-row>
                    <el-col> {{ data.name }} </el-col>
                  </el-row>
                </template>
              </el-tree>
            </div>
          </el-col>

          <el-col :span="20">
            <div class="grid-content bg-purple-dark">
              <el-card class="box-card" shadow="never">
                <div class="clearfix">
                  <span>机构信息</span>
                </div>
              </el-card>

              <el-form :inline="true" :model="formInline" class="demo-form-inline">

                <el-form-item label="机构编号">
                  <el-input v-model="formInline.id" />
                </el-form-item>

                <el-form-item label="机构名称">
                  <el-input v-model="formInline.name" />
                </el-form-item>

                <el-form-item label="机构类型">
                  <el-select v-model="formInline.type" placeholder="请选择">
                    <el-option label="一级转运中心" value="一级转运中心" />
                    <el-option label="二级转运中心" value="二级转运中心" />
                    <el-option label="营业部" value="营业部" />
                  </el-select>
                </el-form-item>
                <el-row class="el-row-two" style="margin:0; ">
                  <el-col :span="24">

                    <el-form-item label="机构地址">
                      <el-select v-model="formInline.province.name" class="el-select-box" placeholder="请选择省">
                        <el-option label="区域一" value="shanghai" />
                        <el-option label="区域二" value="beijing" />
                      </el-select>
                      <el-select v-model="formInline.city.name" class="el-select-box" placeholder="请选择市">
                        <el-option label="区域一" value="shanghai" />
                        <el-option label="区域二" value="beijing" />
                      </el-select>
                      <el-select v-model="formInline.county.name" class="el-select-box" placeholder="请选择县/区">
                        <el-option label="区域一" value="shanghai" />
                        <el-option label="区域二" value="beijing" />
                      </el-select>
                    </el-form-item>

                    <el-form-item label="详细地址">
                      <el-input v-model="formInline.address" />
                    </el-form-item>

                    <el-form-item label="经度">
                      <el-input v-model="formInline.longitude" />
                    </el-form-item>

                    <el-form-item label="维度">
                      <el-input v-model="formInline.latitude" />
                    </el-form-item>

                    <el-form-item label="机构负责人">
                      <el-input v-model="formInline.managerName" />
                    </el-form-item>

                    <el-form-item label="机构电话">
                      <el-input v-model="formInline.phone" />
                    </el-form-item>

                  </el-col>
                </el-row>
                <template>
                  <el-row class="form-button-box">
                    <el-button fixed="center" class="form-button" type="primary" small @click="onSubmit">编辑</el-button>
                  </el-row>
                </template>
              </el-form>

            </div>
          </el-col>

          <el-col :span="20">
            <div class="grid-content bg-purple-dark bg-purple-bottom">
              <el-card class="box-card" shadow="never">
                <div class="clearfix">
                  <span>员工信息</span>
                </div>
              </el-card>
              <!-- :data="tableData" -->
              <!-- <el-row v-if="tableData.length"> -->

              <!-- <el-table stripe style="width: 100%" :data="tableData">
                <el-table-column label="序号" type="index" />
                <el-table-column prop="agecy.id" label="员工编号" />
                <el-table-column prop="createTime" label="手机号" />
                <el-table-column prop="email" label="所属机构" />
                <el-table-column prop="name" label="系统账户" />
                <el-table-column prop="roleNames" label="系统角色" />
                <el-table-column label="账号状态">
                  {{ status===0? '已启用' : '禁用中' }}
                </el-table-column>
              </el-table>
              <el-pagination
                layout="prev, pager, next"
                :total="5"
              /> -->
              <!-- </el-row> -->

              <!-- <div > -->
              <!-- <el-empty description="空空如也" /> -->
              <!-- </div> -->
            </div>
          </el-col>

        </el-row>
      </el-row>

    </div>
    <!-- <Footer /> -->
  </div>
</template>

<script>
// import Footer from '@/components/Footer/FooterName.vue'
import { getTree, getTreeInteger, getUserInteger } from '@/api/essential'
export default {
  // components: {
  // Footer }
  data() {
    return {

      depts: [

      ],
      defaultProps: {

      },
      formInline: {
        id: '',
        name: '',
        type: '',
        province: '',
        city: '',
        county: '',
        address: '',
        longitude: '',
        latitude: '',
        managerName: '',
        phone: ''
      },
      tableData: {

      },
      isType: '',
      // tableData: {

      // },
      id: ''

    }
  },
  created() {
    this.getTrees()
    // this.hClocs()
    // console.log(this.depts.id)
  },
  methods: {
    async getTrees() {
      const res = await getTree()
      // console.log(res)
      // console.log(JSON.parse(res.data.data))
      // 获取树状机构信息
      this.depts = JSON.parse(res.data.data)
    },

    async handleNodeClick({ id }) {
      console.log(id)
      // 获取机构详情
      const res = await getTreeInteger(id)
      console.log(res)
      console.log(res.data.data)
      this.formInline = res.data.data
      if (this.formInline.type === 1) this.formInline.type = '一级转运中心'
      if (this.formInline.type === 2) this.formInline.type = '二级转运中心'
      if (this.formInline.type === 3) this.formInline.type = '营业部'
      const refs = await getUserInteger(id)
      console.log(refs)
      this.tableData = refs.data.data
    },
    onSubmit() {
      // console.log('submit!')
    }
  }
}
</script>

<style lang="scss" scoped>
.institution-container{
  padding: 20px;

  .box-card{
    border-radius: 0;
    background-color: #fafafa;
  }

  .demo-form-inline {
    padding: 20px 30px;

    .el-form-item {
      margin-left: 30px;
    }
    .form-button-box{
      text-align: center;
      .form-button {
        display: inline-block;
        width: 89px;
        height: 36px;
        margin: 0 auto;

        }
    }
    .el-select-box {
      padding-right: 50px;
    }

  }

  .institution-row{
    margin-bottom: 40px;
    .el-row {
    margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;

    }
    .bg-purple-dark {
      background: #fff;
      height: 390px;
    }
    .bg-purple {
      border-radius: 4px;
      background: #fff;
      height: 800px;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .bg-purple-bottom {
      margin-top: 20px

    }

  }
}
</style>
